<html>
<head lang="en">
    <meta charset="utf-8">
    <title>ECharts</title>
    <style type="text/css">
        #main{height:400px;width: 1000px}
    </style>
    <script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化 echarts 实例并绘制图表。
    var myChart = echarts.init(document.getElementById("main"));
    var arrYD = [15,20,22,25,24,23,22,26,27,23,23,24];
    var arrSD = [10,15,22,25,23,23,20,24,23,20,23,24];
    var yd1 = arrYD[0];
    var yd2 = arrYD[1];
    var yd3 = arrYD[2];
    var yd4 = arrYD[3];
    var yd5 = arrYD[4];
    var yd6 = arrYD[5];
    var yd7 = arrYD[6];
    var yd8 = arrYD[7];
    var yd9 = arrYD[8];
    var yd10 = arrYD[9];
    var yd11 = arrYD[10];
    var yd12 = arrYD[11];
    var sd1 = arrSD[0];
    var sd2 = arrSD[1];
    var sd3 = arrSD[2];
    var sd4 = arrSD[3];
    var sd5 = arrSD[4];
    var sd6 = arrSD[5];
    var sd7 = arrSD[6];
    var sd8 = arrSD[7];
    var sd9 = arrSD[8];
    var sd10 = arrSD[9];
    var sd11 = arrSD[10];
    var sd12 = arrSD[11];
    // 指定图表的配置项和数据
    var option={
        title : {
            text: '某某公司员工每月考情信息',
             },
        tooltip : {
            trigger: 'axis'// trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
        },
        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            data:['应到天数','实到天数']
        },
        xAxis : [
            {
                type : 'category',//类目轴
                boundaryGap : false, // boundaryGap值为false的时候，折线第一个点在y轴上
                data : ['2021/1','2021/2','2021/3','2021/4','2021/5','2021/6','2021/7','2021/8','2021/9','2021/10','2021/11','2021/12']
            }
        ],
        yAxis : [
            {
                type : 'value',//数值轴
                axisLabel : {
                    formatter: '{value} 天'
                }
            }
        ],
        series : [
            {
                name:'应到天数',
                type:'line',//图形类型
                symbol:'circle',// 设置拐点为实心圆
                symbolSize:8,// 设置折线上圆点大小
                symbol: 'none',// 设置小圆点消失,注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                // smooth: 0.5,// 设置折线弧度，取值：0-1之间
                data:[yd1,yd2,yd3,yd4,yd5,yd6,yd7,yd8,yd9,yd10,yd11,yd12],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine:{
                    data:[
                        {type:'average',name:'平均值'}
                    ]
                }
            },
            {
                name:'实到天数',
                type:'line',
                symbol:'circle',// 设置拐点为实心圆
                symbolSize:8,// 设置折线上圆点大小
                data:[sd1,sd2,sd3,sd4,sd5,sd6,sd7,sd8,sd9,sd10,sd11,sd12],
                markPoint : {
                    data : [
                        {type : 'min', name: '月最低'}
                    ]
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>
</body>
</html>